¿Quién Soy?

Noticias

Actualizado Twitter oficial de RadioVijaer.

Entrevistas:

Tweets by Radiovijaer

Visitantes Web:

País:
Code: us
Hits: 144254
Total: 62039

Animacion Css Menu | Intro

Hola amigos este es el primer post sobre Css, les presento este menu elegante para que lo usen en el extra de Pwg que quedaría espectacular, o también si saben un poco de programación pueden usar su imaginación y ver dónde lo pueden usar, este menu es una versión adaptada. Creada por programadores de Crodops vemos que tiene un .nav elíptico gran ingenio, está hermoso el menu.

Úsenlo como gusten y pongan su creatividad en el código

Básico

Código Html

Información: Para principiantes en la programación, el código CSS ya está subido en un hoting, solo tienen que copiar el HTML
Azul : Editar y Colocar el Título de cada .li de menu

Avanzado

Información:Para los expertos les dejo el Css y el Html para que brote su imaginación con el css.

Código Css

@font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; } .ca-menu{ padding: 0 0 0 48px; margin: 20px auto; width: 1020px; } .ca-menu li{ width: 230px; height: 230px; border: 10px solid #f6f6f6; overflow: hidden; position: relative; float:left; background: #fff; margin-left:-48px; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-border-radius: 125px; -moz-border-radius: 125px; border-radius: 125px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-menu li:last-child{ margin-right: 0px; } .ca-menu li a{ text-align: left; width: 100%; height: 100%; display: block; color: #333; position: relative; } .ca-icon{ font-family: 'WebSymbolsRegular', cursive; font-size: 40px; color: #f6f6f6;; line-height: 60px; position: absolute; width: 100%; height: 60px; left: 0px; top: 30px; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-main{ font-size: 24px; position: absolute; top: 110px; height: 80px; width: 170px; left: 50%; margin-left: -85px; opacity: 0.8; text-align: center; color: #555; } .ca-sub{ display: none; } .ca-menu li:hover{ border-color: #333; z-index: 999; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .ca-menu li:hover .ca-icon{ color: #000; font-size: 60px; text-shadow: 0px 0px 1px #000; -webkit-animation: moveFromBottom 300ms ease; -moz-animation: moveFromBottom 300ms ease; -ms-animation: moveFromBottom 300ms ease; } .ca-menu li:hover .ca-main{ color: #000; -webkit-animation: moveFromBottom 500ms ease; -moz-animation: moveFromBottom 500ms ease; -ms-animation: moveFromBottom 500ms ease; } a.subrayado{ text-decoration: none; } @-webkit-keyframes moveFromBottom { from { -webkit-transform: translateY(200%) scale(0.5); opacity: 0; } to { -webkit-transform: translateY(0%) scale(1); opacity: 1; } } @-moz-keyframes moveFromBottom { from { -moz-transform: translateY(200%) scale(0.5); opacity: 0; } to { -moz-transform: translateY(0%) scale(1); opacity: 1; } } @-ms-keyframes moveFromBottom { from { -ms-transform: translateY(200%) scale(0.5); opacity: 0; } to { -ms-transform: translateY(0%) scale(1); opacity: 1; } }
Código Html

<ul class="ca-menu">
<li><a href="#"> <span class="ca-icon">F</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 1</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon">H</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 2</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon" id="heart">N</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 3</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon">K</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 4</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon">L</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 5</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
</ul>

Fuente: http://tympanus.net/codrops/
Adaptado por: David Castillo

Davixm